<script setup lang="ts">
import Topic from '@/components/Topic.vue'
import { ref } from 'vue'
import router from '@/router'
import { EditPen } from '@element-plus/icons-vue'
import { userGetTopicListService } from '@/api/user'

const topicList = ref([
  {
    id: 1,
    title: 'TCP和UDP有什么区别',
    publisher: '胡清钟',
    identify: '教师',
    createTime: '2024-12-04',
    watch: '10',
    reply: '2'
  },
])

enum identifyType {
  'teacher' = 'success',
  'student' = 'primary'
}

enum identifyCN {
  'teacher' = '老师',
  'student' = '学生'
}

const watchTopicContent = (id: number) => {
  router.push(`/student/topic/${id}`)
}

const createTopic = () => {
  router.push('/student/topic/add')
}

const getTopicList = async (type: number) => {
  const res = await userGetTopicListService(type)
  console.log(res.data.data)
  topicList.value = res.data.data
}

getTopicList(1)
</script>

<template>
  <div id="main">
    <el-button
      :icon="EditPen"
      circle
      type="primary"
      class="createTopic-btn"
      @click="createTopic"
    ></el-button>
    <div class="select-topic">
      <el-menu mode="horizontal" :default-active="'1'">
        <el-menu-item index="1" @click="getTopicList(1)">最新的话题</el-menu-item>
        <el-menu-item index="2" @click="getTopicList(2)">最热的话题</el-menu-item>
        <el-menu-item index="3" @click="getTopicList(3)">老师发布的话题</el-menu-item>
      </el-menu>
    </div>
    <el-scrollbar height="100vh">
      <Topic @click="watchTopicContent(topic.id)" v-for="topic in topicList" :key="topic.id">
        <template #title>{{ topic.title }}</template>
        <template #publisher>{{ topic.publisher }}</template>
        <template #identify>
          <el-tag :type="identifyType[topic.identify]" style="margin-left: 5px"
            >{{ identifyCN[topic.identify] }}
          </el-tag>
        </template>
        <template #createTime>{{ topic.createTime }}</template>
        <template #watch>{{ topic.watch }}</template>
        <template #reply>{{ topic.reply }}</template>
      </Topic>
    </el-scrollbar>
  </div>
</template>

<style scoped>
.createTopic-btn {
  position: absolute;
  width: 50px;
  height: 50px;
  right: 20px;
  top: 5px;
  z-index: 999;
}
</style>
